<template>
    <div class="login-form">
        <el-form :model="loginForm" ref="loginForm">
            <el-form-item prop="username" :rules="[
                    {required: true, trigger: 'blur', message: '请输入账户'}
                ]">
                    <el-input 
                        v-model="loginForm.username"
                        placeholder="请输入账户"
                        name="username"
                        prefix-icon="iconfont iconzhanghu"
                        minlength="11"
                        clearable
                        autoComplete="on"
                        @keyup.enter.native="handleLoginByPwd">
                    </el-input>
            </el-form-item>
            <el-form-item prop="password" :rules="[
                    {required: true, trigger: 'blur', message: '请输入密码'}
                ]">
                    <el-input 
                        v-model="loginForm.password"
                        placeholder="请输入密码"
                        name="password"
                        prefix-icon="iconfont iconmima"
                        minlength="11"
                        clearable
                        autoComplete="on"
                        @keyup.enter.native="handleLoginByPwd">
                    </el-input>
            </el-form-item>
        </el-form>
        <el-button :loading="loading" @click.native.prevent="handleLoginByPwd" type="primary" size="small">登 录</el-button>
         <div class="login-form.slogan">
                <span>科技赋能人力</span>
                <span>生态共创未来</span>
            </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            loading:false,
            loginForm:{
                username: '',
                password: '',
                type:2
            }
        }
    },
    methods:{
        handleLoginByPwd(){
            let self = this;
            self.$refs["loginForm"].validate(valid => {
                if (valid) {
                    let self = this;
                    self.$refs["loginForm"].validate(valid => {
                        if (valid) {
                           self.loading = true;
                           self.$store.dispatch("Login", self.loginForm).then((res) => {
							   if(res.code == 0){
								   self.loading = false;
								   this.$router.replace("/");
							   }else{
								   this.$message.error(res.status)
								   self.loading = false;
							   }
							}).catch(error => {
							    self.loading = false;
							});
                        }
                    });
                }
            });

        }
    }
}
</script>
<style lang="scss" scoped>
@include component(login-form){
    width: 100%;
    height: 100%;
    padding: 0 60px;
    box-sizing: border-box;
    .el-form-item {
        margin-bottom: 18px;
        height: 40px;
        .el-form-item__content {
            height: 100%;

            & .el-input {
                height: 100%;
                font-size: 14px;
                & .el-input__inner {
                    height: 100%;
                      
                }
                & > .el-input-group__append {
                    background: #fff;
                    padding: 0 10px;
                    box-sizing: border-box;
                }
            }

        }
    }
    .el-button {
         display: block;
         width: 100%;
         font-size: 18px;
         margin: 35px auto 50px;
    }
    @include part(slogan){
        width: 100%;
        height: 32px;
        padding: 0 30px;
        box-sizing: border-box;
        & > span {
            font-family: 'PingFangSC';
            font-size: 14px;
            line-height: 32px;
            letter-spacing: 4px;
            color: #444444;
            float: left;

            &:nth-of-type(2) {
                float: right;
            }
        }
    }
}
</style>